<%@ page import="com.ychs.entity.College" %>
<%@ page import="com.ychs.entity.Major" %>
<%@ page import="com.ychs.entity.Role" %>
<%@ page import="com.ychs.entity.User" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String id = request.getParameter("id");
    String username = request.getParameter("username");
    String password = request.getParameter("password");
    String name = request.getParameter("name");
    String collegeId = request.getParameter("college");
    String majorId = request.getParameter("major");
    String clazz = request.getParameter("clazz");
    String grade = request.getParameter("grade");
    String schoolJob = request.getParameter("schoolJob");
    String phone = request.getParameter("phone");
    String QQ = request.getParameter("QQ");
    String roleId = request.getParameter("role");
    String state = request.getParameter("state");
    String remark = request.getParameter("remark");

    College college = new College();
    college.setId(Integer.parseInt(collegeId));
    Major major = new Major();
    major.setId(Integer.parseInt(majorId));
    Role role = new Role();
    role.setId(Integer.parseInt(roleId));

    User user = new User();
    user.setId(Integer.parseInt(id));
    user.setUsername(username);
    user.setPassword(password);
    user.setName(name);
    user.setCollege(college);
    user.setMajor(major);
    user.setClazz(clazz);
    user.setGrade(Integer.parseInt(grade));
    user.setSchoolJob(schoolJob);
    user.setPhone(phone);
    user.setQq(QQ);
    user.setRole(role);
    user.setState(state);
    user.setRemark(remark);

    pageContext.setAttribute("user", user);
    System.out.println("user"+user.toString());
%>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-form layuimini-form">

            <form class="layui-form" action=""
                        id="userModifyForm" lay-filter="userModifyFormFilter">

                <input type="hidden" id="id" name="id">

                <div class="layui-form-item">
                    <label class="layui-form-label">用户名<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input"
                               id="username" name="username"
                               lay-verify="required|username" lay-reqtext="用户名为必填项"
                               autocomplete="off" placeholder="请输入用户名" >
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">密码<span style="color: red">*</span> </label>
                    <div class="layui-input-block">
                        <input type="password" class="layui-input"
                               id="password" name="password"
                               lay-verify="required|pass" lay-reqtext="密码为必填项"
                               placeholder="请输入密码" autocomplete="off">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">真实姓名<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input"
                               id="name" name="name"
                               lay-verify="required|name" lay-reqtext="真实姓名为必填项"
                               autocomplete="off" placeholder="请输入真实姓名">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">院系</label>
                    <div class="layui-input-block">
                        <select id="college" name="college" lay-filter="college"
                                lay-verify="required" lay-reqtext="院系为必填项">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">专业</label>
                    <div class="layui-input-block">
                        <select id="major" name="major" lay-filter="major"
                                lay-verify="required" lay-reqtext="专业为必填项">>
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">班级</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input"
                               id="clazz" name="clazz"
                               lay-verify="required" lay-reqtext="班级为必填项"
                               placeholder="请输入班级" autocomplete="off" >
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">年级</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input"
                               id="grade" name="grade"
                               lay-verify="required" lay-reqtext="年级为必填项"
                               placeholder="请选择入学年份" autocomplete="off" readonly>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">在校职务</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input"
                               id="schoolJob" name="schoolJob"
                               placeholder="请输入在校职务" autocomplete="off">
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">手机<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="tel" class="layui-input"
                               id="phone" name="phone" lay-verify="required|phone"
                               placeholder="请输入手机号码"  autocomplete="off"  lay-reqtext="请输入正确的电话号码">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">QQ</label>
                    <div class="layui-input-block">
                        <input type="number" class="layui-input"
                               id="QQ" name="QQ"
                               placeholder="请输入QQ号码" autocomplete="off">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">角色</label>
                    <div class="layui-input-block">
                        <select id="role" name="role" lay-filter="role" >
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">用户状态</label>
                    <div class="layui-input-block">
                        <select name="state" lay-filter="state" >
                            <option value="">请选择</option>
                            <option value="启用">启用</option>
                            <option value="禁用">禁用</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
            <textarea placeholder="请输入备注信息" class="layui-textarea"
                      name="remark" lay-filter="remark"></textarea>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="button" id="saveBtn" class="layui-btn layui-btn-normal"
                                lay-submit="" lay-filter="saveBtn">确认保存</button>
                        <button type="button" id="resetBtn" class="layui-btn layui-btn-normal"
                                lay-filter="resetBtn">重置</button>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>
<script>
    layui.use(['form','layedit','laydate'], function () {
        var form = layui.form,
            layedit=layui.layedit,
            layer=layui.layer,
            laydate=layui.laydate,
            initYear,
            $ = layui.$;

        function formInit() {

            form.val('userModifyFormFilter',{
                "id":'${user.id}',
                "username":'${user.username}',
                "password":'${user.password}',
                "name":'${user.name}',
                "clazz":'${user.clazz}',
                "grade":'${user.grade}',
                "schoolJob":'${user.schoolJob}',
                "phone":'${user.phone}',
                "QQ":'${user.qq}',
                "state":'${user.state}',
                "remark":'${user.remark}',

            })

            $('#college').empty();
            $('#college').append("<option value=''>请选择</option>");
            let url = 'CollegeServlet';
            let params = {method:'search'};
            let successFn = function (res) {
                res = JSON.parse(res);
                let json = res;
                let collegeId='${user.college.id}';
                for (let i=0;i<json.data.length;i++) {

                    if(json.data[i].id==collegeId){
                        $('#college').append("<option value='"+json.data[i].id+"' selected>"+json.data[i].name+"</option>");
                    }else{
                        $('#college').append("<option value='"+json.data[i].id+"'>"+json.data[i].name+"</option>");
                    }
                }

                //页面加载时，把院系的数据查询出来，并赋值给下拉框
                form.render('select');
            }
            $.get(url, params, successFn);


            $('#major').empty();
            $('#major').append("<option value=''>请选择</option>");
            url = 'MajorServlet';
            params = {method: 'search'};
            successFn = function (res) {
                res = JSON.parse(res);
                let majors = res.data;
                for (let i = 0; i < majors.length; i++) {
                    if(majors[i].id=='${user.major.id}'){
                        $('#major').append("<option value='"+majors[i].id+"' selected>"+majors[i].name+"</option>");
                    }else{
                        $('#major').append("<option value='"+majors[i].id+"'>"+majors[i].name+"</option>");
                    }
                }
                form.render('select');
            }
            $.get(url, params, successFn);


            $('#role').empty();
            $('#role').append("<option value=''>请选择</option>");
            url = 'RoleServlet';
            params = {method: 'search'};
            successFn = function (res) {
                res = JSON.parse(res);
                let roles = res.data;
                for (let i = 0; i < roles.length; i++) {
                    if(roles[i].id=='${user.role.id}'){
                        $('#role').append("<option value='"+roles[i].id+"' selected>"+roles[i].name+"</option>");
                    }else{
                        $('#role').append("<option value='"+roles[i].id+"'>"+roles[i].name+"</option>");
                    }
                }
                form.render('select');
            }
            $.get(url, params, successFn);

        }
        formInit();

        form.on('select(college)', function (data) {
            //清空目前专业下拉狂中的数据
            $('#major').empty();
            $('#major').append("<option value=''>请选择</option>");
            let college = data.value;
            let url = 'MajorServlet';
            let params = {method: 'search', collegeSearch: college};
            let successFn = function (res) {
                res = JSON.parse(res);
                let majors = res.data;
                for (let i = 0; i < majors.length; i++) {
                    $('#major').append("<option value='"+majors[i].id+"'>"+majors[i].name+"</option>");
                }
                form.render('select');
            }
            $.get(url, params, successFn);
        });

        //焦点监听
        $("#username").blur(function(){
            var value = this.value;
            if(typeof value == "undefined" || value == null || value == ""){
                layer.msg("用户名为必填项！",{icon:5});
            }else if(/^[A-Za-z][A-Za-z0-9]{2,14}$/.test(value)==false){
                layer.msg("用户名应为字母数字组合，开头是字母，3-15 个字符！",{icon:5});
            }
        })
        $("#password").blur(function(){
            var value = this.value;
            if(typeof value == "undefined" || value == null || value == ""){
                layer.msg("密码为必填项！",{icon:5});
            }else if(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{5,19}$/.test(value)==false){
                layer.msg("密码是6-20 个字符，由数字和字母构成!",{icon:5});
            }
        })
        $("#name").blur(function(){
            var value = this.value;
            if(typeof value == "undefined" || value == null || value == ""){
                layer.msg("真实姓名为必填项！",{icon:5});
            }else if(/^[\u4e00-\u9fa5]{2,5}$/.test(value)==false){
                layer.msg("请输入您的真实姓名!",{icon:5});
            }
        })
        $("#phone").blur(function(){
            var value = this.value;
            if(typeof value == "undefined" || value == null || value == ""){
                layer.msg("手机为必填项！",{icon:5});
            }else if(/^1[0-9]{10}$/.test(value)==false){
                layer.msg("请输入正确的手机号码!",{icon:5});
            }
        })


        //监听提交
        form.verify({
            username:function (value) {
                if(/^[A-Za-z][A-Za-z0-9]{2,14}$/.test(value)==false){
                    return '用户名应为字母数字组合，开头是字母，3-15 个字符'
                }
            },
            name:function (value) {
                if(/^[\u4e00-\u9fa5]{2,5}$/.test(value)==false){
                    return '请输入您的真实姓名'
                }
            },
            pass:[/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{5,19}$/,'密码是6-20 个字符，由数字和字母构成'],

        });



        laydate.render({
            elem:'#grade',
            type:'year',
            trigger:'click',
            ready: function(date){ // 控件在打开时触发，回调返回一个参数：初始的日期时间对象
                initYear = date.year;
            },
            change: function(value, date, endDate){ // 年月日时间被切换时都会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
                var selectYear = date.year;
                var differ = selectYear-initYear;
                if (differ != 15 && differ != -15) {
                    if($(".layui-laydate").length){
                        $("#grade").val(value);
                        $(".layui-laydate").remove();
                    }
                }
                initYear = selectYear;
            }
        })
        form.render();

        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            let url = 'UserServlet?method=modify';
            let successFn = function (res) {
                if (res == "true") {
                    layer.close(parentIndex);
                    layer.msg("修改成功",{icon:1});
                    parent.layui.table.reload('currentTableId');
                }
            }
            $.post(url, data.field, successFn);
            return false;
        });

        $('#resetBtn').click(function () {
            formInit();
            layer.msg("信息已重置",{icon: 1});
        })


    });
</script>